<template>
	<div>
		<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
			<!-- 判断是否有数据 -->
			<van-card v-for="(v,i) in list" :key='i'>
				<template #desc>
					<div class="item">
						<!-- 图片 -->
						<div class="img" @click="dotoFilm(v.filmId)">
							<img :src="v.poster" @click="dotoFilm(v.filmId)">
						</div>
						<!-- 内容 -->
						<div class="context">
							<!-- 标题 -->
							<div class="title">
								{{v.name}}
								<span id="d2">
									{{v.filmType.name}}
								</span>
							</div>
							<!-- 主演 -->
							<div class="protagonist">
								主演:<span v-for="item in v.actors">
									{{item.name}}
								</span>
							</div>
							<!-- 上映时间 -->
							<div class="reltime">
								上映时间：{{timeFormat(v.premiereAt)}}
							</div>
						</div>
						<!-- 抢购按键 -->
						<div class="snap-btnbox">
							<van-button plain type="primary" color="#ff5f16" size='mini' class='btn'>预购</van-button>
						</div>
					</div>
				</template>
			</van-card>
		</van-list>
	</div>
</template>

<script>
	import axios from 'axios';
	import timeFormats from '@/utility/formatTime'
	//引入轻提示
	import Vue from 'vue';
	import {Toast} from 'vant';
	Vue.use(Toast);
	
	export default {
		data() {
			return {
				list: [], //储存电影数据
				loading: false,
				finished: false,
				pageNum: 1 //表示请求页数
			};
		},
		methods: {
			// 异步更新数据
			onLoad() {
				this.loading = false;
				// 调用vue原型中$axiops
				this.$axios.get("/soon", {
					params: {
						pageNum: this.pageNum
					}
				}).then((res) => {
					// 总页数
					let maxPages = Math.ceil(res.total / 10);
					//判断是否请求
					if (maxPages < this.pageNum) {
						//关闭请求
						this.loading = true;
						// 到底
						this.finished = true;
						return;
					}
					this.pageNum++
					// 追加电影数据
					this.list = this.list.concat(res.films)
				}).catch(err => {Toast('提示内容')})

			},
			//将转换时间解构
			...timeFormats,
			// 点击跳转详情页面
			dotoFilm(v) {
				// push不能和params属性一起用，可以用名字路由name 
				//id:表示电影id rou:代表哪个路由跳转
				this.$router.push({name:'film',params:{id:v,rou:"soon"}})
			}
		},
		// 挂载
		mounted() {}
	};
</script>

<style scoped="scoped" lang="scss">
	div {
		background: #fff;
	}

	/* 列表 */
	.item {
		div {
			background: #fff;
		}

		display: flex;
		// padding: 15px 5px 15px 5px;
		height: 94px;
		position: relative;
		background: #fff;
		border-bottom: 1px solid #f0f0f0;

		/* 图片盒子 */
		.img {
			width: 66px;
			height: 94px;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
			}
		}

		/*内容盒子 */
		.context {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			box-sizing: border-box;
			padding: 0px 10px;

			div {
				font-size: 13px;
				margin-top: 4px;
				color: #797d82;
			}

			// 标题
			.title {
				color: #191a1b;
				font-size: 16px;
				line-height: 22px;

				// 2d的图标
				span {
					font-size: 9px;
					color: #fff;
					height: 14px;
					padding: 0 2px;
					border-radius: 2px;
					background-color: #d2d6dc;
				}
			}

			// 主演
			.protagonist {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 190px;
			}

			// 上映时间
			.reltime {}
		}

		/* 抢购按键 */
		.snap-btnbox {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50px;

			.btn {
				padding: 0 5px;
			}
		}
	}
</style>
